<template>
  <div>
    <el-dialog
      v-model="props.showDialog"
      :title="state.title"
      width="50%"
      :before-close="colseDialog"
    >
      <div class="form-box">
        <el-form
          ref="formRef"
          :model="state.formData"
          :rules="rules"
          class="demo-ruleForm"
          label-width="150"
          :disabled="state.formDisable"
        >
          <el-form-item label="接口名称" prop="apiName">
            <el-input v-model.number="state.formData.apiName" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="接口地址" prop="apiAddress">
            <el-input v-model.number="state.formData.apiAddress" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="接口类型" prop="apiType">
            <el-select v-model="state.formData.apiType" placeholder="请选择">
              <el-option
                v-for="item in state.typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参数" prop="inParams">
            <el-input v-model.number="state.formData.inParams" type="textarea" autocomplete="off" />
          </el-form-item>
          <el-form-item label="响应结果" prop="outResult">
            <el-input
              v-model.number="state.formData.outResult"
              type="textarea"
              autocomplete="off"
            />
          </el-form-item>

          <el-form-item label="接口描述" prop="apiDescript">
            <el-input
              v-model.number="state.formData.apiDescript"
              type="textarea"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="标签" prop="label">
            <el-input v-model.number="state.formData.label" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="状态" prop="apiStatus">
            <el-select v-model="state.formData.apiStatus" placeholder="请选择">
              <el-option
                v-for="item in state.statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="colseDialog">取消</el-button>
          <el-button type="primary" @click="handleSave"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue'
const formRef = ref(null)
const emit = defineEmits(['saveFormData', 'colseLog'])
const state = reactive({
  formDisable: false,
  title: '添加接口',
  typeOptions: [
    {
      label: 'Post',
      value: 1
    },
    {
      label: 'get',
      value: 2
    }
  ],
  statusOptions: [
    {
      label: '未完成',
      value: 0
    },
    {
      label: '已完成',
      value: 1
    },
    {
      label: '设计中',
      value: 2
    },
    {
      label: '放弃',
      value: 3
    }
  ],
  formData: {
    apiName: '',
    apiAddress: '',
    apiType: '',
    inParams: '',
    outResult: '',
    apiDescript: '',
    labels: '',
    apiStatus: ''
  }
})
const rules = {
  apiName: [{ required: true, message: '请输入接口名称', trigger: 'blur' }],
  apiAddress: [{ required: true, message: '请输入接口地址', trigger: 'blur' }],
  apiType: [{ required: true, message: '请输入接口类型', trigger: 'blur' }],
  inParams: [{ required: true, message: '请输入接口参数', trigger: 'blur' }],
  outResult: [{ required: true, message: '请输入响应结果', trigger: 'blur' }],
  apiDescript: [{ required: true, message: '请输入接口描述', trigger: 'blur' }],
  label: [{ required: true, message: '请输入标签', trigger: 'blur' }],
  apiStatus: [{ required: true, message: '请输入接口状态', trigger: 'blur' }]
}
// let formData = reactive({
//   apiName: '',
//   apiAddress: '',
//   apiType: '',
//   inParams: '',
//   outResult: '',
//   apiDescript: '',
//   labels: '',
//   apiStatus: ''
// })
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  }
})

defineExpose({ apiDetails })
// flag为true则为查看接口
function apiDetails(val, flag) {
  // 如果有id则是修改api服务接口

  if (val?.id) {
    // nextTick(() => {
    //   // state.formData = Object.assign(state.formData, val)
    //   state.formData = { ...val }
    // })
    setTimeout(() => {
      state.formData = { ...val }
    }, 100)
    if (flag) {
      state.title = '查看接口'
      state.formDisable = true
    } else {
      state.title = '修改接口'
      state.formDisable = false
    }
  } else {
    // formData = Object.assign(formData, {
    //   apiName: '',
    //   apiAddress: '',
    //   apiType: '',
    //   inParams: '',
    //   outResult: '',
    //   apiDescript: '',
    //   label: '',
    //   apiStatus: ''
    // })
    state.title = '添加接口'
    state.formDisable = false
  }
}
//保存接口
function handleSave() {
  formRef.value.validate((valid) => {
    if (valid) {
      emit('saveFormData', state.formData)
      colseDialog()
    }
  })
}
//关闭
function colseDialog() {
  delete state.formData?.id
  formRef.value.resetFields()
  // console.log(formData, '56')
  emit('colseLog', false)
}
</script>
